前言

JavaScript，常簡稱為 JS，是一種腳本語言，它可以在前端與後端使用。以前端來說，它可以替網頁加入各式的互動功能：例如按下按鈕後的動作，是要送出表單呢？還是要切換分頁呢？或是要取得什麼訊息呢？甚至是向後端伺服器發出獲取資訊的請求，這些功能或需求，全都可以用 JS 做到。

因為它太好用了，有許多以它為基礎的工具產生。常見的幾個類別如下

• 瀏覽器內建的應用程式介面們（Application Programming Interfaces，APIs）

  • 例如 MediaDevices.getUserMedia()，它可以詢問使用者是否開啟多媒體權限，若同意的話，瀏覽器就可以接收來自多媒體的資訊。

• 第三方 API 們

  • 允許開發者將這些來自第三方的資訊（串接）呈現在網頁上
  • 例：google maps、twitter、spotify、交通部運輸資料流通服務平臺（TDX）、各種天氣 api、……等等
  • 例：Random user generator （https://randomuser.me/） 允許開發者藉由 AJAX （Asynchronous JavaScript and XML，非同步的JavaScript與XML技術），使用 XMLHttpRequest() 向伺服器發出請求以獲取資訊。

• 第三方框架（Framework）、函式庫（Library）們

  • 以元件的方式來組合這些零件，以快速建立網頁或應用程式
  • 例如前端三支香：Vue、React、Angular。（想轉職前端，這三支至少要挑一支來拜阿XD）
  • 或者像 Node.js，是為了使 Javascript 也能用於伺服器的開發與運作的一種後端執行環境。

Fig. １. google map 提供的內嵌功能，也是一種 api 的呈現方式

為了讓 JS 乖乖幫我們做事，需要了解 JS 的常見名詞、定義及使用方式，才能正確使用它。

基礎概念

• JS 的讀取是由上至下、由左至右，並轉換成對應的元素。
• 空格、tab、換行都會被當作空白。
• 建議在每個句子後加上分號 ; 以區隔每個指令。（但也有不加分號派的）
• 通常會影響到 HTML 的 JS，放置的位置會在 body 內側的最下方，防止瀏覽器讀取檔案時，因順序錯誤而解讀錯誤。
• 也可依需求決定放置位置。
  • 例如 Vue.js 的 cdn 連結，必須放置在 <div id="app"> 的前方，才能正常實例化。
• JS 對大小寫敏感，名為 anapple 跟 anApple 的兩個變數，對 JS 來說是不同的！

註解方式：

• 一行：// 註解放這邊
• 多行：/* 註解放這邊 */

// JS 會看不到這行

/* 星號範圍內 JS 都看不到，
不管有多少內容或者換行，
都看不到喔喔喔 */

console.log("只看的到我");

補充：API & SDK

• 應用程式介面（Application Programming Interface，API）

  • 是一種機制，使不同軟體或硬體以預先決定的通訊協定來傳遞訊息。

  • 可以替應用程式新增第三方功能

  • 可跨平台通訊

  • 若是指網頁的開發，指的是瀏覽器 API（Browser API）。瀏覽器 API 是為了便利開發者的 app 與用戶瀏覽器／用戶端的其他軟硬體互動，而內建的一些方法／功能。

    • 例：MouseEvent.clientX，當事件發生時，能讀取滑鼠的 X 軸座標。

  • 若是指第三方 API，則是指那些存在於網路上的功能或資訊。如 google, twitter, facebook, 第三方金流（例如綠界）等，這些公司允許開發者透過 JS 訪問伺服器，並在自己的網站上使用獲取的資料。

• 軟體開發套件（Software Development Kit，SDK）：

  • 供開發人員使用的特定平台構建工具（們）。簡單說就是簡化某種開發的工具集合，通常由程式庫、編譯器、各式範例等組成。
  • 可以用來建立新的應用程式
  • 只能在特定語言或平台下使用
    • 例如 AWS 針對 .net 提供的 AWS SDK：https://aws.amazon.com/tw/sdk-for-net/

終於來到 js 基礎了~~光這篇文裡就有好多坑等我填XD(跳
繼續努力！

參考資料

• JavaScript 基礎 - 學習該如何開發 Web | MDN，https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics
• 语法和数据类型 - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types
• 駝峰式大小寫 - 維基百科，自由的百科全書，https://zh.wikipedia.org/zh-tw/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB#
• 基礎但不簡單: 變數命名規則| by LSZ | 程式愛好者 | Medium，https://medium.com/%E7%A8%8B%E5%BC%8F%E6%84%9B%E5%A5%BD%E8%80%85/%E8%AE%8A%E6%95%B8%E5%91%BD%E5%90%8D-f53cd1115076
• SDK 與 API – 開發人員工具之間的差異 – AWS，https://aws.amazon.com/tw/compare/the-difference-between-sdk-and-api/
• JavaScript 是什麼? - 學習該如何開發 Web | MDN，https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript